<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录界面</title>

    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }

        .login-container {
            max-width: 400px;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .login-form {
            display: flex;
            flex-direction: column;
        }

        .login-form input[type="text"],
        .login-form input[type="password"] {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .login-form input[type="submit"] {
            width: 100%;
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>

    <script>
        function error0(){
            alert("验证码错误，请重新输入")
        }
        function error1(){
            alert("用户名错误，请重新输入")
        }
        function error2(){
            alert("密码错误，请重新输入")
        }
    </script>
</head>
<body>
<div class="login-container">

    <c:choose>
        <c:when test="${Error == 0}">
            <script>
                error0()
            </script>
        </c:when>
        <c:when test="${Error == 1}">
            <script>
                error1()
            </script>
        </c:when>
        <c:when test="${Error == 2}">
            <script>
                error2()
            </script>
        </c:when>

    </c:choose>
    <h2>登录</h2>
    <form class="login-form" action="LoginServlet" method="POST">
        <!-- 验证码输入框和刷新按钮 -->
        <div class="captcha-container">
            <img id="captcha-img" src="./CaptchaServlet">
            <input type="button" onclick="refreshCaptcha()" value="刷新">
            <input type="text" name="captchaInput" placeholder="验证码">
        </div>
        <!-- 用户名和密码输入框 -->
        <input type="text" name="username" placeholder="用户名" value="${name}">
        <input type="password" name="password" placeholder="密码" value="${password}">
        <%--         required--%>
        <!-- 提交按钮 -->
        <button type="submit">登录</button>
    </form>
</div>
<script>
    function refreshCaptcha() {
        // 重新加载验证码图像的路径，以刷新验证码图像和验证码值。将rand参数传递给Servlet以生成新的验证码。
        <%--// 刷新验证码图像的路径。这将触发Servlet重新生成验证码图像和值。同时，将新的随机数传递给Servlet，
        以确保每次加载的都是新的验证码。然后，重新设置输入框的值以反映新的验证码。在提交表单时，将输入框的值与存储在session中的值进行比较，
        以验证用户输入的验证码是否正确。如果验证码不匹配，则显示错误消息并阻止表单提交。否则，继续处理表单提交--%>
        document.getElementById('captcha-img').src = "<c:url value="/CaptchaServlet"/>" + "?" + Math.random();
    }
</script>


</body>
</html>
